<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/date_input.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <script src="../js/jquery-1.12.3.js"></script>
    <script src="../js/jquery.date_input.pack.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  </head>
  <body>
    <header>
      <a class="navbar-header" href="">
        <img src="../images/ph.png" alt="">
        <div>
          <span>Nifty</span>
        </div>
      </a>
    </header>
    <div class="boxed">
      <div class="menu-wrap">
        <ul>
          <li class="list-header">Navigation</li>
          <li class="active-link">
            <a href="#">
              <i class="ph"></i>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="ph"></i>
              <span>Dashboard</span>
            </a>
            <li/>
              <li class="list-divider"></li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                  <i class="down-list"></i>
                </a>
                <ul class="op-list">
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                </ul>
              </li>
              <li class="list-header">Components</li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                  <i class="down-list"></i>
                </a>
                <ul class="op-list">
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                </ul>
              </li>
        </ul>
      </div>
      <!-- 内容区域 -->
      <div class="content-container">
        <div class="common-tit">
          <h2>课程周表详情</h2>
          <span>课程系统 > 课程详情 > 课程周表详情</span>
          <div class="cours-gbtn">
            <a href="#">学员签到</a>
            <a href="#">导师签到</a>
            <a href="">取消预约</a>
          </div>
        </div>
        <div class="course-box">
          <h3>
            <span>基本信息</span>
          </h3>
          <ul class="cou-bas clearfix">
            <li>
              <span>销售类型:</span>
              <em>单次售卖课程</em>
            </li>
            <li>
              <span>课程类型:</span>
              <em>常规课</em>
            </li>
            <li>
              <span>课程名称:</span>
              <em>不能不能超过十个字</em>
            </li>
            <li>
              <span>导师名称:</span>
              <em>张幻想</em>
            </li>
            <li>
              <span>教室:</span>
              <em>A34</em>
            </li>
            <li>
              <span>舞种:</span>
              <em>jazz hiphop</em>
            </li>
            <li>
              <span>授课对象:</span>
              <em>幼儿</em>
            </li>
            <li>
              <span>上课时长:</span>
              <em>2小时</em>
            </li>
          </ul>
          <h3>
            <span>课程信息</span>
          </h3>
          <div class="course-b clearfix">
            <div class="class-itit">
              消费方式:
            </div>
            <div class="class-fcon">
              <div>
                <span>充值:</span>
                <em>200元/课时</em>			
              </div>
              <div>
                <span>次卡:</span>
                <em>2次/课时</em>	
              </div>
              <div>
                <em>直接售卖</em>
              </div>	
              <div>
                <em>月卡</em>	
              </div>
              <div>
                <em>年卡</em>	
              </div>	
            </div>
          </div>
          <div class="course-b clearfix">
            <div class="class-itit">
              预约信息:
            </div>
            <div class="class-fcon">
              <div>
                <em>需要预约</em>			
              </div>
            </div>
          </div>
          <div class="course-b clearfix">
            <div class="class-itit">
              课程时间:
            </div>
            <div class="class-fcon">
              <div>
                <em>11月10日 - 12月10日</em>			
              </div>
              <div>
                <storng>星期一</storng>
                <em>14:30</em>	
              </div>
              <div>
                <storng>星期一</storng>
                <em>14:30</em>	
              </div>
            </div>
          </div>
        </div>
        <div class="course-box">
          <h3>
            <i>记录信息</i>
          </h3>
          <div class="atten-co">
            <div class="atten-box">
              <div class="atten-sel">预约记录</div>
              <div>签到记录</div>
            </div>
          </div>
          <div class="curli-box">
            <div class="curlist-con sel-curl">
              <div class="scrollbox">
                <table>
                  <thead>
                    <tr>
                      <th class="week-t">签到时间</th>
                      <th class="week-pos">学员</th>
                      <th class="week-m">操作人</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>前台-张小姐</td>
                    </tr>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>前台-张小姐</td>
                    </tr>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>前台-张小姐</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="curlist-con">
              <div class="scrollbox">
                <table>
                  <thead>
                    <tr>
                      <th class="cou-t">操作时间</th>
                      <th class="cou-stu">学员名</th>
                      <th class="cou-cl">教室</th>
                      <th class="cou-t">操作时间</th>
                      <th class="cou-m">操作人</th>
                      <th class="cou-ope">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>A23</td>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>前台-张小姐</td>
                      <th class="cou-ope">
                        <span>取消</span>
                        </td>
                    </tr>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>A23</td>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>前台-张小姐</td>
                      <th class="cou-ope">
                        <span>取消</span>
                        </td>
                    </tr>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>A23</td>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>前台-张小姐</td>
                      <th class="cou-ope">
                        <span>取消</span>
                        </td>
                    </tr>
                    <tr>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>张幻想</td>
                      <td>A23</td>
                      <td>
                        <span>20116-02-18</span>
                        <em>14：30</em>
                      </td>
                      <td>前台-张小姐</td>
                      <td class="cou-ope">
                        <span>取消</span>
                        </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../js/common.js"></script>
    <script>
$(function(){
  $('.date-list1').date_input();
  $(".date-list2").date_input();
  $(".date-input").date_input();
});
$('.date-list2').on("click", function() {
  updateT1();
  $('.nav span').on("click", function() {
    if ($(this).parent().parent().parent().prev().attr("class") == "date-list2") {
      updateT1();
    };
  });
});
$('.date-list1').on("click", function() {
  updateT2();
  $('.nav span').on("click", function() {
    if ($(this).parent().parent().parent().prev().attr("class") == "date-list1") {
      updateT2();
    };
  });
});
$(".atten-box div").on("click", function() {
  $(".atten-box div").removeClass("atten-sel");
  $(this).addClass("atten-sel");
  if ($(this).index() == 0) {
    $(".curlist-con").eq(0).addClass("sel-curl").siblings().removeClass("sel-curl");
  } else if ($(this).index() == 1) {
    $(".curlist-con").eq(1).addClass("sel-curl").siblings().removeClass("sel-curl");
  } else {
    $(".curlist-con").eq(2).addClass("sel-curl").siblings().removeClass("sel-curl");
  }
})
    </script>
  </body>
</html>
